*{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #23395D; } .topnav { background-color: rgb(45 200 45); overflow: hidden; font-family: "Ubuntu", sans-serif; font-weight: bold; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #d2e4d4; color: black; } .topnav a.active { background-color: #0e6344; color: white; } .topnav .icon { display: none; } .topnav input[type="text"] { float: right; padding: 6px; border: none; margin-top: 8px; margin-right: 16px; font-size: 17px; border-radius: 11px; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } .topnav input { display: none; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive input { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; border: 2px solid black; } } /*navbar ends*/ .head-top{ justify-content: center; text-align: center; } .head-top img{ width: 200px; height: 200px; } .main-heading{ font-family: 'Italianno', cursive; font-family: 'Rampart One', cursive; font-size: 70px; color: white; } .quotes{ font-family: 'Italianno', cursive; font-size: 40px; color: white; margin: 10px; } .questions{ display: flex; justify-content: center; } .card{ box-shadow: 10px 10px 20px black; width: 80%; height: auto; margin: 20px; border-radius: 10px; background-color: #E0E1E4; padding: 10px 5px 20px 5px; } .text{ text-transform: capitalize; margin-left: 40px; } .text li a{ text-decoration: none; color: black; font-size: 18px; } .text li a:hover{ color: red; font-size: 22px; } .text li { margin: 5px; list-style-type: circle; } .card-content{ margin:10px 0px 10px 20px } .head{ font-family: 'Roboto Condensed', sans-serif; font-size: 20px; margin: 10px; font-weight: bold; } /* footer css */ .footer_div { max-width: 1170px; margin: auto; font-family: "Ubuntu", sans-serif; } .footer_row { display: flex; flex-wrap: wrap; } ul { list-style: none; } .footer { background-color: #3b590e; padding: 70px 0; } .footer_col { width: 25%; padding: 0 15px; } .footer_col h4 { font-size: 18px; color: #ffffff; text-transform: capitalize; margin-bottom: 35px; font-weight: 500; position: relative; } .footer_col h4::before { content: ""; position: absolute; left: 0; bottom: -10px; background-color: #e91e63; height: 2px; box-sizing: border-box; width: 50px; } .footer_col ul li:not(:last-child) { margin-bottom: 10px; } .footer_col ul li a { font-size: 16px; text-transform: capitalize; color: #ffffff; text-decoration: none; font-weight: 300; color: #bbbbbb; display: block; transition: all 0.3s ease; } .footer_col ul li a:hover { color: #ffffff; padding-left: 8px; } .footer_col .social-links a { display: inline-block; height: 40px; width: 40px; background-color: rgba(255, 255, 255, 0.2); margin: 0 10px 10px 0; text-align: center; line-height: 40px; border-radius: 50%; color: #ffffff; transition: all 0.5s ease; } .footer_col .social-links a:hover { color: #24262b; background-color: #ffffff; } /* responsive css */ @media (max-width: 767px) { .footer_col { width: 50%; margin-bottom: 30px; } } @media (max-width: 574px) { .footer_col { width: 100%; } }